page {
    background-color: #23262d;
}
.login-box {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    .login-ipt {
        width: 510rpx;
        height: 730rpx;
        margin: 0 auto;
        .fj {
            width: 198rpx;
            height: 178rpx;
            margin: 0 auto;
            image {
                width: 100%;
                height: 100%;
            }
        }
        .ipt-box {
            width: 100%;
            height: 205rpx;
            margin: 0 auto;
            margin-top: 68rpx;
            box-sizing: border-box;
            .Account {
                width: 100%;
                height: 80rpx;
                box-sizing: border-box;
                padding: 0 20px;
                display: flex;
                align-items: center;
                background: #33363D;
                box-shadow: 0 8px 28px 0 rgba(0,0,0,0.20);
                border-radius: 22px;
                image {
                    width: 28rpx;
                    height: 38rpx;
                    margin-right: 16rpx;
                }
                input{
                    color: #fff;
                    font-size: 14px;
                }
            }
            .password {
                width: 100%;
                height: 80rpx;
                box-sizing: border-box;
                padding: 0 20px;
                display: flex;
                align-items: center;
                background: #33363D;
                box-shadow: 0 8px 28px 0 rgba(0,0,0,0.20);
                border-radius: 22px;
                margin-top: 44rpx;
                image {
                    width: 28rpx;
                    height: 38rpx;
                    margin-right: 16rpx;
                }
                input{
                    color: #fff;
                    font-size: 14px;
                }
            }
        }
    }
}
.login-btn {
    width: 100%;
    height: 80rpx;
    background-image: linear-gradient(150deg, #F25B86 0%, #F1AC5E 100%);
    border-radius: 22px;
    margin-top: 136rpx;
    color: #fff;
    text-align: center;
    line-height: 80rpx;
    font-size: 40rpx;
}
.fotter {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 24rpx;
    text {
        color: #ccc;
        font-size: 24rpx;
        
    }
}

.info {
    width: 100%;
    height: 360rpx;
    background-image: linear-gradient(122deg, #F25D85 9%, #F1A562 100%);
    border-radius:0  0  58rpx 58rpx;
    // opacity: 0.37;
    box-sizing: border-box;
    padding: 15px;
    .titbtn {
        width: 100%;
        height: 39rpx;
        // background-color: red;
       
        .right {
            float: right;
        }
        image {
            width: 39rpx;
            height: 39rpx;
        }
        .setting {
            margin-right: 23rpx;
        }
    }
    .myinfo {
        width: 672rpx;
        height: 146rpx;
        margin-top: 44rpx;
        // background-color: red;
        display: flex;
        align-items: center;
        .img {
            width: 146rpx;
            height: 146rpx;
            overflow: hidden;
            border-radius: 100%;
            // background-color:green;
        }
        .myname {
            width: 200rpx;
            height: 100%;
            // background-color: green;
            margin-left: 34rpx;
           
            text {
                display: block;
                width: 100%;
                height: 20px;
                
            }
            .name {
                color: #fff;
                font-size: 36rpx;
            }
            .vipj {
                width: 200rpx;
                height: 46rpx;
                background: #33363D;
                border-radius: 10px;
                margin-top: 20rpx;
                text-align: center;
                color: #fff;
            }
        }
                .arrright {
                    width: 35rpx;
                    height: 35rpx;
                    margin-left: 260rpx;
                }
    }
}
.myvip {
    width: 672rpx;
    height: 136rpx;
    background: #33363D;
    border-radius: 34rpx;
    margin: 0 auto;
    position: absolute;
    left: 20px;
    top:  150px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 12px;
    .left {
        width:100px ;
        height: 100%;
        font-size: 36rpx;
        color: #FFFFFF;
        text-align: center;
        line-height:96rpx;
        border-right: 1px solid #ccc;
    }
    .cnet {
        width: 230rpx;
        height: 100%;
        margin-left: 33rpx;
        view {
            font-size: 28rpx;
            color: #FFFFFF;
        }
    }
    image {
        width: 57rpx;
        height: 61rpx;
        margin-left: 40px;
    }
}
.Order {
    width: 100%;
    height: 280rpx;
    background-color: #33363D;
    margin-top: 120rpx;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 10px;
    .myOrder {
        width: 100%;
        display: flex;
        justify-content: space-between;
        text {
            color: #fff;
            font-size: 36rpx;
        }
        .right {
            width: 50px;
            display: flex;
            align-items: center;
            text {
                color: #ccc;
                font-size: 14px;
            }
            image {
                width: 28rpx;
                height: 34rpx;
            }
        }
    }
    .orderIcon {
        width: 100%;
        height: 150rpx;
        // background-color: red;
        display: flex;
        justify-content: space-around;
        margin-top: 25px;
        .order-item {
            width: 84rpx;
            height: 100%;
            // background-color: green;
            box-sizing:  border-box;
            padding: 5px 0;
        
            image {
                display: block;
                width: 47rpx;
                height: 47rpx;
                margin: 0 auto;
                margin-bottom: 8px;
            }
            text {
                color: #ccc;
                font-size: 14px;
            }
        }
    }
}
.myipt {
    width: 100%;
    height: 430rpx;
    background: #33363D;
    border-radius: 6px;
    margin-top: 20px;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    .iptbox {
        width: 100%;
        height: 60rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text {
            color: #ccc;
            font-size: 14px;
            line-height: 60rpx;
        }
        image {
            width: 30rpx;
            height: 30rpx;
        }
    }
}